<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta content="telephone=no" name="format-detection" />
    <title>Document</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/laydate.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/html5.js"></script>
    <script src="js/placeholder.js"></script>
    <!--[if IE]>
<script>
    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,main,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
    <!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/html5.css">
<![endif]-->
    <!--[if lt IE 9]>
    <script src="js/css3-mediaqueries.js"></script>
<![endif]-->
    <script>
        var browser = navigator.appName
        var b_version = navigator.appVersion
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
    </script>
</head>
<!-- 备注 -->
<!-- btn-split 拆单 -->
<!-- btn-merge 合单 -->
<!-- btn-deliver-goods 发货 -->

<body>
    <div class="content-box">
        <div class="content-top">
            <div class="fl">
                <a href=""><img src="./images/logo.PNG" /></a>
            </div>
            <img class="menu-btn" src="./images/menu-logo.PNG" />
            <div class="fr">
                <img class="top-home" src="./images/top-home.PNG" />
                <div class="top-news">
                    <img src="./images/top-news.PNG" />
                    <span></span>
                </div>
                <div class="top-account">
                    <img src="./images/top-account.PNG" />
                    <span class="name">UserName</span>
                    <img src="./images/icon_dropdown.png" />
                    <ul>
                        <li><a>修改密码</a></li>
                        <li><a>角色管理</a></li>
                        <li><a>管理员管理</a></li>
                    </ul>
                </div>
                <img class="top-btn" src="./images/top-btn.PNG" />
            </div>
        </div>
        <div class="content-menu">
            <ul class="menu-list">
                <li class="item1 active">
                    <a>首页</a>
                </li>
                <li class="item2">
                    <a>订单</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item3">
                    <a>产品</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item4">
                    <a>会员</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item5">
                    <a>促销</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item6">
                    <a>数据</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item7">
                    <a>博客</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item8">
                    <a>店铺</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item9">
                    <a>设置</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="content-right">
            <div class="order-box deliver-list">
                <p class="title1">发货管理</p>
                <div class="table-box">
                    <ul class="top-tab">
                        <li class="active"><a>全部</a></li>
                        <li><a>等待发货</a></li>
                        <li><a>已发货</a></li>
                    </ul>
                    <div class="mt20">
                        <input class="vcb search" type="text" placeholder="请输入产品型号、产品名称或订单号" />
                        <button class="vcb btn-blue">搜索</button>
                    </div>
                    <div class="list">
                        <ul class="order1">
                            <li>
                                <div class="head1">
                                    <span>订单号</span>
                                    <span>No.#2247832743253</span>
                                    <span>创建于2019-12-12 12:12:12</span>
                                </div>
                                <ul class="order2">
                                    <li>
                                        <div class="head2">
                                            <p class="fl">
                                                <span>发货订单1</span>
                                                <span>配送方式：EMS</span>
                                                <span>保险费：$0.99</span>
                                            </p>
                                            <p class="fr">
                                                <span>把一张订单拆分成两张订单发货</span>
                                                <button class="btn-blue btn-deliver-goods">发货</button>
                                                <button class="btn btn-merge">合单</button>
                                            </p>
                                        </div>
                                        <div class="head22">
                                            <p>序号</p>
                                            <p>产品</p>
                                            <p>属性</p>
                                            <p>数量</p>
                                        </div>
                                        <ul class="order3">
                                            <li>
                                                <div class="item">1</div>
                                                <div class="item">
                                                    <p class="img"><img src="./images/pro.png" /></p>
                                                    <p class="text">产品名称产品名称</p>
                                                </div>
                                                <div class="item">
                                                    <p>编号:T09444</p>
                                                    <p>SKU(出厂编码):996577</p>
                                                    <p>Type:ssss</p>
                                                    <p>ScreenSize:121212</p>
                                                </div>
                                                <div class="item">9999</div>
                                            </li>
                                            <li>
                                                <div class="item">2</div>
                                                <div class="item">
                                                    <p class="img"><img src="./images/pro.png" /></p>
                                                    <p class="text">产品名称产品名称</p>
                                                </div>
                                                <div class="item">
                                                    <p>编号:T09444</p>
                                                    <p>SKU(出厂编码):996577</p>
                                                    <p>Type:ssss</p>
                                                    <p>ScreenSize:121212</p>
                                                </div>
                                                <div class="item">9999</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <div class="head2">
                                            <p class="fl">
                                                <span>发货订单1</span>
                                                <span>配送方式：EMS</span>
                                                <span>保险费：$0.99</span>
                                            </p>
                                            <p class="fr">
                                                <span>把一张订单拆分成两张订单发货</span>
                                                <button class="btn-blue btn-deliver-goods">发货</button>
                                                <button class="btn btn-split">拆单</button>
                                            </p>
                                        </div>
                                        <div class="head22">
                                            <p>序号</p>
                                            <p>产品</p>
                                            <p>属性</p>
                                            <p>数量</p>
                                        </div>
                                        <ul class="order3">
                                            <li>
                                                <div class="item">1</div>
                                                <div class="item">
                                                    <p class="img"><img src="./images/pro.png" /></p>
                                                    <p class="text">产品名称产品名称</p>
                                                </div>
                                                <div class="item">
                                                    <p>编号:T09444</p>
                                                    <p>SKU(出厂编码):996577</p>
                                                    <p>Type:ssss</p>
                                                    <p>ScreenSize:121212</p>
                                                </div>
                                                <div class="item">9999</div>
                                            </li>
                                            <li>
                                                <div class="item">2</div>
                                                <div class="item">
                                                    <p class="img"><img src="./images/pro.png" /></p>
                                                    <p class="text">产品名称产品名称</p>
                                                </div>
                                                <div class="item">
                                                    <p>编号:T09444</p>
                                                    <p>SKU(出厂编码):996577</p>
                                                    <p>Type:ssss</p>
                                                    <p>ScreenSize:121212</p>
                                                </div>
                                                <div class="item">9999</div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <div class="head1">
                                    <span>订单号</span>
                                    <span>No.#2247832743253</span>
                                    <span>创建于2019-12-12 12:12:12</span>
                                </div>
                                <ul class="order2">
                                    <li>
                                        <div class="head2">
                                            <p class="fl">
                                                <span>发货订单1</span>
                                                <span>配送方式：EMS</span>
                                                <span>保险费：$0.99</span>
                                                <span>运单号：<span class="waybill-no">1242143254325345</span></span>
                                                <span>发货时间：2019-12-12 12:12:12</span>
                                                <span>备注内容：这里添加一个备注</span>
                                            </p>
                                            <p class="fr">
                                                <span class="shipped">已发货</span>
                                            </p>
                                        </div>
                                        <div class="head22">
                                            <p>序号</p>
                                            <p>产品</p>
                                            <p>属性</p>
                                            <p>数量</p>
                                        </div>
                                        <ul class="order3">
                                            <li>
                                                <div class="item">1</div>
                                                <div class="item">
                                                    <p class="img"><img src="./images/pro.png" /></p>
                                                    <p class="text">产品名称产品名称</p>
                                                </div>
                                                <div class="item">
                                                    <p>编号:T09444</p>
                                                    <p>SKU(出厂编码):996577</p>
                                                    <p>Type:ssss</p>
                                                    <p>ScreenSize:121212</p>
                                                </div>
                                                <div class="item">9999</div>
                                            </li>
                                            <li>
                                                <div class="item">2</div>
                                                <div class="item">
                                                    <p class="img"><img src="./images/pro.png" /></p>
                                                    <p class="text">产品名称产品名称</p>
                                                </div>
                                                <div class="item">
                                                    <p>编号:T09444</p>
                                                    <p>SKU(出厂编码):996577</p>
                                                    <p>Type:ssss</p>
                                                    <p>ScreenSize:121212</p>
                                                </div>
                                                <div class="item">9999</div>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="pages-btn">
                        <span class="total">108条记录,</span><span>共11页</span>
                        <a>&lt;</a>
                        <a class="active">1</a>
                        <a>2</a>
                        <a>3</a>
                        <a>&gt;</a>
                        <span>跳转</span>
                        <input type="number" />
                        <span>页</span>
                    </div>
                </div>
            </div>
            <!-- 合并弹窗 start -->
            <div class="dialog merge-dialog">
                <div class="content">
                    <span class="close"></span>
                    <p><img src="./images/icon_care.png" /></p>
                    <p>合单后，之前拆分的运单将删除，继续吗？</p>
                    <div class="btn-tab">
                        <button class="btn ok">确定</button>
                        <button class="btn-blue cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 合并弹窗 end -->

            <!-- 物流信息弹窗 start -->
            <div class="dialog waybill-dialog">
                <div class="content">
                    <p class="title">物流信息</p>
                    <span class="close"></span>
                    <p class="company">快递公司：<span>韵达</span></p>
                    <p class="num">快递单号：<span>2423432432</span></p>
                    <ul class="deliver-info">
                        <li class="active">
                            <span></span>
                            <p>信息1</p>
                            <p>2019-19-12 12:12:12</p>
                        </li>
                        <li>
                            <span></span>
                            <p>信息2</p>
                            <p>2019-19-12 12:12:12</p>
                        </li>
                        <li>
                            <span></span>
                            <p>信息3</p>
                            <p>2019-19-12 12:12:12</p>
                        </li>
                        <li>
                            <span></span>
                            <p>信息4</p>
                            <p>2019-19-12 12:12:12</p>
                        </li>
                        <li>
                            <span></span>
                            <p>信息3</p>
                            <p>2019-19-12 12:12:12</p>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 物流信息弹窗 end -->

            <!-- 发货弹窗 start -->
            <div class="dialog deliver-goods-dialog">
                <div class="content">
                    <p class="title">发货</p>
                    <span class="close"></span>
                    <div class="box">
                        <p>
                            <span>运单号</span>
                            <input type="text" />
                        </p>
                        <p>
                            <span>发货时间</span>
                            <input class="time" type="text" placeholder="选择日期" />
                        </p>
                        <p class="remarks-p">
                            <span>备注内容</span>
                            <textarea class="remarks" type="text"></textarea>
                        </p>
                    </div>
                    <div class="btn-tab">
                        <button class="btn-blue ok">发货</button>
                        <button class="btn cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 发货弹窗 end -->

            <!-- 拆单弹窗 start -->
            <div class="dialog split-dialog">
                <div class="content">
                    <p class="title">拆单</p>
                    <span class="close"></span>
                    <div class="box">
                        <p class="info">数量:填写需要拆分出来发货的产品数量</p>
                        <div class="top">
                            <p>产品</p>
                            <p>新包裹数量/总量</p>
                        </div>
                        <ul>
                            <li>
                                <div class="left">
                                    <p class="img"><img src="./images/pro.png" /></p>
                                    <p class="text">产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称</p>
                                </div>
                                <div class="right">
                                    <input type="number" />/<span>9999</span>
                                </div>
                            </li>
                            <li>
                                <div class="left">
                                    <p class="img"><img src="./images/pro.png" /></p>
                                    <p class="text">产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称产品名称</p>
                                </div>
                                <div class="right">
                                    <input type="number" />/<span>9999</span>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="btn-tab">
                    <button class="btn-blue ok">保存</button>
                    <button class="btn cancle">返回</button>
                </div>
            </div>
        </div>
        <!-- 拆单弹窗 end -->

    </div>
    </div>
    <script src="js/echarts.min.js"></script>
    <script src="js/laydate.js"></script>
    <script src="js/common.js"></script>

    <script>
        // 合单弹窗
        $(".btn-merge").click(function () {
            $(".merge-dialog").addClass("show");
        })

        $(".merge-dialog .ok").click(function () {
            $(".merge-dialog").removeClass("show");
        })

        // 物流信息（点击已发货的运单号）
        $(".waybill-no").click(function () {
            $(".waybill-dialog").addClass("show");
        })

        $(".waybill-dialog .ok").click(function () {
            $(".waybill-dialog").removeClass("show");
        })


        // 发货
        $(".btn-deliver-goods").click(function () {
            $(".deliver-goods-dialog").addClass("show");
        })

        $(".deliver-goods-dialog .ok").click(function () {
            $(".deliver-goods-dialog").removeClass("show");
        })

        // 拆单
        $(".btn-split").click(function () {
            $(".split-dialog").addClass("show");
        })

        $(".split-dialog .ok").click(function () {
            $(".split-dialog").removeClass("show");
        })


    </script>
</body>

</html>